﻿<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <link href="js/bootstraptable/bootstrap-table.min.css" rel="stylesheet" />
    <link href="js/easyhelper/easyhelper.min.css" rel="stylesheet" />
    <link href="js/jconfirm/jquery-confirm.min.css" rel="stylesheet" />
    <script src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>

<body>
    <div class="container-fluid p-t-15" id="page">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header"><h4>数据库管理</h4></div>
                    <div class="card-body">
                        <div id="toolbar" class="toolbar-btn-action">
                            <button id="btn_add" info>
                                <span class="mdi mdi-plus" aria-hidden="true"></span>新增
                            </button>
                        </div>
                        <table id="tb_departments"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
    <script src="js/easyhelper/easyhelper.min.js"></script>
    <script src="js/bootstraptable/bootstrap-table.min.js"></script>
    <script src="js/bootstraptable/bootstrap-table-zh-CN.min.js"></script>
    <script src="js/jconfirm/jquery-confirm.min.js"></script>
    <script type="text/javascript" src="js/main.min.js"></script>

    <script type="text/javascript">
        var departments;
        $(function () {
            departments = $('#tb_departments').bootstrapTable({
                classes: 'table table-bordered table-hover table-striped',
                uniqueId: 'Id',
                idField: 'Id',             // 每行的唯一标识字段
                toolbar: '#toolbar',       // 工具按钮容器
                data: page.Data,
                columns: [{
                    field: 'Name',
                    title: '连接名称'
                }, {
                    field: 'DataBaseName',
                    title: '数据库名',
                }, {
                    field: 'ServerIP',
                    title: '服务器地址',
                }, {
                    field: 'DataType',
                    title: '类型'
                }, {
                    field: 'operate',
                    title: '操作', width: 220,
                    formatter: btnGroup,  // 自定义方法
                    events: {
                        'click .edit-btn': function (event, value, row, index) {
                            $.alert({
                                content: '不要着急,还没做完', type: 'red',
                                typeAnimated: false
                            });
                        },
                        'click .show-btn': function (event, value, row, index) {
                            Helper.ui.dialog({
                                title: "数据库连接串",
                                content: row.ConnectionStrings,
                                yesText: '关闭1',
                                noText: '测试1',
                                buttonNoClose: [false, true],
                                yes: {
                                    callback: function () {
                                        alert('c')
                                    }
                                },
                                no :{
                                    callback: function () {
                                        Helper.ui.loading(".helper-dialog-wrapper", {
                                            text: "请稍后,正在测试中....."
                                        });
                                        TestDbconnection(row.Id);
                                    },
                                    text: '测试'
                                },
                            });
                        },
                        'click .del-btn': function (event, value, row, index) {
                            $.alert({
                                title: '嗨!你确定要这样做么',
                                content: '是否删除当前数据库配置????', type: 'orange',
                                typeAnimated: false,
                                buttons: {
                                    confirm: {
                                        text: '确认',
                                        btnClass: 'btn-primary',
                                        action: function () {
                                            delDataBase(row.Id);
                                        }
                                    },
                                    cancel: {
                                        text: '取消'
                                    }
                                }
                            });
                        }
                    }
                }]
            });
            $('[data-toggle="tooltip"]').tooltip();
            $('#toolbar #btn_add').on('click', function () {
                var isCustom = false;
                var dialog = Helper.ui.dialog({
                    title: "添加数据库连接",
                    content: `<div class="row dialog-container"><form class="form-horizontal" action="!#" onsubmit="return false;"><div class="col-md-12"><div class="form-group"><label class="col-md-3 control-label" for="example-hf-email">连接名称</label><div class="col-md-8"><input class="form-control" type="text" name="name" placeholder="连接名称.."></div></div></div><div class="col-md-12"><div class="form-group"><label class="col-md-3 control-label" for="example-hf-email">数据库类型</label><div class="col-md-5"><select class="form-control" name="dataType" size="1"><option value="0">MySql</option><option value="2">PostgreSQL</option><option value="1">SqlServer</option><option value="3">Oracle</option></select></div><div class="col-md-3" style="margin-left:-20px"><label class="lyear-checkbox checkbox-inline checkbox-primary"><input type="checkbox" id="custom" name="custom" value="1"><span>自定义串</span></label></div></div></div><div class="custom" style="display:none"><div class="col-md-12"><div class="form-group"><label class="col-md-3 control-label" for="example-hf-email">连接串</label><div class="col-md-9"><textarea style="height:100px" name="connectionStrings" class="form-control"></textarea></div></div></div></div><div class="delfaule"><div class="col-md-12"><div class="form-group"><label class="col-md-3 control-label" for="example-hf-email">服务器地址</label><div class="col-md-6"><input class="form-control" type="text" name="serverIP" placeholder="服务器地址.."></div><div class="col-md-3" style="margin-left:-20px"><input class="form-control" type="text" name="port" placeholder="端口号" value="3306" style="width:71px;" /></div></div></div><div class="col-md-12"><div class="form-group"><label class="col-md-3 control-label" for="example-hf-email">数据库名称</label><div class="col-md-6"><input class="form-control" type="text" name="dataBaseName" placeholder="数据库名称.."></div><div class="col-md-3" style="margin-left:-20px"><label class="lyear-checkbox checkbox-inline checkbox-primary"><input type="checkbox" name="isIgnore" value="1"><span>不指定</span></label></div></div></div><div class="col-md-12"><div class="form-group"><label class="col-md-3 control-label" for="example-hf-email">数据库用户</label><div class="col-md-8"><input class="form-control" type="text" name="userName" placeholder="数据库用户.."></div></div></div><div class="col-md-12"><div class="form-group"><label class="col-md-3 control-label" for="example-hf-email">数据库密码</label><div class="col-md-8"><input class="form-control" type="text" name="userPass" placeholder="数据库密码.."></div></div></div></div></form></div>`,
                    buttonNoClose: [true, false],
                    afterOpen: function () {
                        $('input[name="custom"]').on('click', function () {
                            isCustom = $(this).prop('checked');
                            if (isCustom) {
                                $('.custom').show();
                                $('.delfaule').hide();
                            } else {
                                $('.custom').hide();
                                $('.delfaule').show();
                            }
                        });

                        $('select[name="dataType"]').on('change', function () {

                            var port = 3306, ck = $(this).val();
                            console.log(ck);
                            if (ck === '0') { port = 3306; }
                            else if (ck === '1') { port = 1433; }
                            else if (ck === '2') { port = 5432; }
                            else if (ck === '3') { port = 1521; }
                            $('input[name="port"]').val(port);
                        });
                    },
                    yes: {
                        callback: function () {
                            var obj = $('.dialog-container form').formToJson();
                            var rex = /^[0-9]+$/;

                            if (obj.name === "") {
                                Helper.ui.message.error("连接名称不能为空", {});
                                $('input[name="name"]').focus(); return;
                            }
                            if (!isCustom) {
                                if (obj.serverIP === "") {
                                    Helper.ui.message.error("服务器地址不能为空", {});
                                    $('input[name="serverIP"]').focus(); return;
                                }
                                if (obj.port === "") {
                                    Helper.ui.message.error("端口号不能为空", {});
                                    $('input[name="port"]').focus(); return;
                                }
                                if (!rex.test(obj.port)) {
                                    Helper.ui.message.error("端口号只能为整数字", {});
                                    $('input[name="port"]').val('').focus();
                                    return;
                                }
                                if (typeof obj.isIgnore !== 'string' && obj.dataBaseName === '') {
                                    Helper.ui.message.error("数据库名称不能为空", {});
                                    $('input[name="dataBaseName"]').focus();
                                    return;
                                }
                                if (obj.userName === "") {
                                    Helper.ui.message.error("用户名不能为空", {});
                                    $('input[name="userName"]').focus(); return;
                                }
                                if (obj.userPass === "") {
                                    Helper.ui.message.error("用户密码不能为空", {});
                                    $('input[name="userPass"]').focus(); return;
                                }
                            } else {

                                if (obj.connectionStrings === "") {
                                    Helper.ui.message.error("自定义数据库连接串不能为空");
                                    $('textarea[name="connectionStrings"]').focus(); return;
                                }
                            }
                            Helper.ui.loading(".helper-dialog-wrapper", { text: "请稍后...." });
                            UpdateRow(JSON.stringify(obj));
                            Helper.ui.removeLoading(".helper-dialog-wrapper");
                            Helper.ui.message.success("增加成功");
                            departments.bootstrapTable('load', page.Data);
                            Helper.ui.removeDialog();
                            $('[data-toggle="tooltip"]').tooltip();
                        }
                    }
                });
            })

        });

        // 操作按钮
        function btnGroup() {
            let html =
                ['<a href="#!" class="btn btn-xs btn-info m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i>编辑</a>',
                    '<a href="#!" class="btn btn-xs btn-info m-r-5 show-btn" title="查看链接串" data-toggle="tooltip"><i class="mdi mdi-database"></i>显示</a>',
                    '<a href="#!" class="btn btn-xs btn btn-danger del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i>删除</a>']
                    .join('');
            return html;
        }
    </script>

</body>
</html>